<template>
  <div class="container">
    <div style="margin-top: 48rpx">
      <p style="font-size: 30rpx; font-weight: 500; color: #747474">
        请完善您的个人信息
      </p>
      <p style="font-size: 28rpx; color: #333333; margin: 32rpx 0 10rpx 0">
        姓名
      </p>
      <u-input v-model="form.realname" placeholder="请输入姓名"></u-input>
      <p style="font-size: 28rpx; color: #333333; margin: 32rpx 0 10rpx 0">
        身份证
      </p>
      <u-input v-model="form.idcard" placeholder="请输入您的身份证号"></u-input>
    </div>
    <p
      style="
        font-size: 30rpx;
        font-weight: 500;
        color: #747474;
        margin-top: 30px;
        margin-bottom: 20px;
      "
    >
      请上传身份证正反面
    </p>
    <div style="align-items: flex-end; justify-content: space-between">
      <view
        style="
          background: #f0f8f5;
          border-radius: 8px;
          display: flex;
          margin-bottom: 46rpx;
          padding: 30rpx 24rpx;
        "
      >
        <div style="margin-top: 12rpx">
          <p
            style="
              font-size: 34rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 48rpx;
            "
          >
            头像面
          </p>
          <p
            style="
              font-size: 22rpx;
              color: #999999;
              margin-top: 8rpx;
              line-height: 30rpx;
            "
          >
            上传/拍摄人像面
          </p>
        </div>
        <u-upload
          :fileList="fileList"
          @afterRead="afterRead"
          @delete="deletePic"
          name="front"
          :maxCount="1"
          style="margin-left: 63rpx;"
        >
          <image class="upload" :src="bg1"></image>
        </u-upload>
      </view>
      <view
        style="
          background: #f0f8f5;
          border-radius: 8px;
          display: flex;
          padding: 30rpx 24rpx;
        "
      >
        <u-upload
          :fileList="fileList"
          @afterRead="afterRead"
          @delete="deletePic"
          name="back"
          :maxCount="1"
        >
          <image class="upload" :src="bg2"></image>
        </u-upload>
        <div style="margin-top: 12rpx;">
          <p
            style="
              font-size: 34rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 500;
              color: #333333;
              line-height: 48rpx;
              text-align: right;
            "
          >
            国徽面
          </p>
          <p
            style="
              font-size: 22rpx;
              color: #999999;
              margin-top: 8rpx;
              line-height: 30rpx;
            "
          >
            上传/拍摄国徽面
          </p>
        </div>
      </view>
    </div>

    <wButton
      :componentStyle="{
        borderRadius: '36rpx',
        fontWeight: '500',
        height: '88rpx',
        marginTop: '88rpx',
      }"
      fontColor="#fff"
      bgColor="linear-gradient(270deg, #4DCBA5 0%, #6BD6B5 100%)"
      class="wbutton"
      text="确认提交"
      @click.native="startRePass()"
    ></wButton>
  </div>
</template>
<script>
import wButton from "../../../components/watch-login/watch-button.vue";
import w_md5 from "../../../js_sdk/zww-md5/w_md5";
import bg1 from "./image/2.png";
import bg2 from "./image/1.png";
export default {
  data() {
    return {
      form: {
        type: 1,
      },
      bg1,
      bg2,
      fileList: [],
    };
  },
  components: {
    wButton,
  },
  methods: {
    async afterRead(e) {
      const url = await this.uploadFilePromise(e.file.url);
      if (e.name === "front") {
        this.form.front_view = url;
        this.bg1 = url;
      } else {
        this.form.back_view = url;
        this.bg2 = url;
      }
    },
    deletePic() {},
    uploadFilePromise(url) {
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        new Date().getTime() +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);

      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/user/uploadimage?" +
            param +
            "&sign=" +
            sign, // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          success: (res) => {
            resolve(JSON.parse(res.data).pic_url);
          },
        });
      });
    },
    startRePass() {
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        new Date().getTime() +
        "&front_view=" +
        this.form.front_view +
        "&back_view=" +
        this.form.back_view +
        "&realname=" +
        this.form.realname +
        "&idcard=" +
        this.form.idcard +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/user/userverification?" +
          param +
          "&sign=" +
          sign, // 仅为示例，非真实的接口地址
        success: (res) => {
          if (res.data.code == 1) {
            uni.navigateBack();
          }
          uni.showToast({
            icon: "none",
            title: res.data.msg,
          });
        },
      });
    },
  },
};
</script>
<style>
page {
  /* padding: 0 30rpx; */
  margin:0 auto;
  width:calc(100% - 60rpx)
}
.container {
  padding-bottom: 20px;
}
.upload {
  width: 385rpx;
  height: 242rpx;
}
</style>
